| element | 您所在的位置：网站首页 › vue table select › element |
|
这里写了部分elment标签的作用及简单应用，更多应用请前往官网 1. el-row和el-colel-row和el-col是Element UI中用于布局(Layout)的标签，其中el-row为容器标签，用于包含el-col标签；el-col为栅格标签，用于设置列的宽度和间距。 示例： 第一列 第二列 第三列el-row属性：gutter，type，justify，align，tag el-col属性：span，offset，push，pull，xs/sm/md/lg/xl，tag 用法参考官方文档Layout布局 2. el-form和el-form-itemel-form和el-form-item用于表单的创建和验证，其中el-form为表单容器，el-form-item为表单项。 更多参数配置请查看官方文档Form表单 3. el-input输入框el-input用于文本输入框的创建。 属性： v-model: 绑定的数据对象placeholder: 占位符（提示）clearable: 是否可清空disabled: 是否禁用maxlength: 最大输入长度show-password: 是否显示密码切换按钮更多配置请查看官方文档Input输入框 4. el-buttonel-button用于按钮的创建。 主要按钮常见属性： 参数说明类型可选值默认值size尺寸stringmedium / small / mini—type类型stringprimary / success / warning / danger / info / text—plain是否朴素按钮boolean—falseround是否圆角按钮boolean—falsecircle是否圆形按钮boolean—falseloading是否加载中状态boolean—falsedisabled是否禁用状态boolean—falseicon图标类名string——autofocus是否默认聚焦boolean—falsenative-type原生 type 属性stringbutton / submit / resetbutton官方文档Button按钮 5. el-select和el-optionel-select 和 el-option 是 element-ui 中常用的下拉框组件，它们的作用是提供用户一个可以选择的选项列表，支持单选、多选等模式。 更多的使用方法见官方文档Select选择器 6. el-table和el-table-columnel-table 和el-table-column是 Element UI 中的表格组件，用于展示数据列表。 el-table 的主要属性：data，columns，stripe，border，height，row-key，highlight-current-row，size，等等 el-table-column 的主要属性：label，prop，width，align，sortable，render-header，scoped-slot 更多功能及具体用法详见官方文档Table表格 7. el-pagination 分页组件el-pagination 是 Element UI 中的分页组件，用于展示数据分页信息和快速跳转到指定页面。 el-pagination 的主要属性： current-page：当前页码。page-size：每页显示的数据条数。total：总数据条数。layout：分页布局，可选值有 total、prev、pager、next、jumper、sizes, 可选多个。page-sizes：每页显示数据条数的下拉框选项。示例： 更多功能及具体用法详见官方文档Pagination分页 8. el-dialog对话框el-dialog 是一个弹出框组件，用于展示一些需要用户操作的信息，例如登录框、设置框等。 这是一段信息 取 消 确 定更多功能及具体用法详见官方文档Dialog对话框 9. el-upload文件上传el-upload 是文件上传组件，可以上传文件到服务器并显示上传进度。详见Upload上传 图片上传示例： previewPhoto(item) { // item.file，获取上传的文件对象，将上传的文件对象转为临时的url this.tempImageUrl = URL.createObjectURL(item.file); this.file = item.file; // 将获取文件对象保存到vue示例的data中 },参数说明类型可选值默认值action必选参数，上传的地址string——headers设置上传的请求头部object——multiple是否支持多选文件boolean——data上传时附带的额外参数object——name上传的文件字段名string—filewith-credentials支持发送 cookie 凭证信息boolean—falseshow-file-list是否显示已上传文件列表boolean—truedrag是否启用拖拽上传boolean—falseaccept接受上传的文件类型（thumbnail-mode 模式下此参数无效）string——on-preview点击文件列表中已上传的文件时的钩子function(file)——on-remove文件列表移除文件时的钩子function(file, fileList)——on-success文件上传成功时的钩子function(response, file, fileList)——on-error文件上传失败时的钩子function(err, file, fileList)——on-progress文件上传时的钩子function(event, file, fileList)——on-change文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用function(file, fileList)——before-upload上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。function(file)——before-remove删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。function(file, fileList)——list-type文件列表的类型stringtext/picture/picture-cardtextauto-upload是否在选取文件后立即进行上传boolean—truefile-list上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]array—[]http-request覆盖默认的上传行为，可以自定义上传的实现function——disabled是否禁用boolean—falselimit最大允许上传个数number——on-exceed文件超出个数限制时的钩子function(files, fileList)—- |
| CopyRight 2018-2019 实验室设备网 版权所有 |